<template>
  <div class="stu_info_wrap">
    <bread-crumb></bread-crumb>
    <div class="stu_info">
      <h1 class="stu_info_title">会员信息录入</h1>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员编号" prop="stu_id" >
              <el-input v-model.trim="form.stu_id"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="stu_name">
              <el-input v-model.trim="form.stu_name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="stu_sex">
              <el-radio v-model.trim="form.stu_sex" label="男">男</el-radio>
              <el-radio v-model.trim="form.stu_sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="籍贯" prop="stu_jg">
              <el-cascader
                v-model="value"
                :options="options"
                :props="{ 
                  label:'name',
                  value:'name',
                 }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="注册日期" prop="stu_date">
              <el-date-picker 
              v-model="form.stu_date" 
              type="date" 
              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否单身" prop="stu_gbf">
              <el-input v-model.trim="form.stu_gbf"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="头像" prop="stu_head_img">
              <el-button @click="upLoad">点击上传头像</el-button>
              <el-button @click="goCamera">拍照上传</el-button>
             <input type="file" @change="getFile" ref="getInp" hidden />
             <div>
              <img width="150px" height="150px"
              :src="form.stu_head_img" alt="" srcset="" />
             </div>
             <div style="marginTop: 150px">
                <p>
                  注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传
                </p>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="爱好及自我评价" prop="stu_hobby" >
          
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <div class="wangEditWrap" style="height: 200px; overflow: hidden">
          <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
        </div>
        
        </el-form-item>

        <el-form-item >
          <el-button type="primary" :plain="true" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="goReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { req_area,req_stu_info } from "@/api/stuInfo.js";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      form: {
        stu_id: "",
        stu_name: "",
        stu_date: "",
        stu_gbf: "",
        stu_jg: "",
        stu_sex: "男",
        stu_hobby: "",
        stu_head_img: ""
      },
      value: [],
      options: [],
      //爱好
      editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', 
    };
  },
  async mounted() {
    //籍贯
    let result = await req_area();
    console.log(result);
    this.options = result.data;

    //传头像
    console.log(this.$route.query);
    this.form.stu_head_img = this.$route.query.imgSrc;
    console.log(this.form);

    //爱好
    setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>';
            console.log(this.editor.getHtml());
            console.log(this.editor.getText());
        }, 5000);
  },
  methods: {
    goCamera() {
      this.$router.push({
        name: "cameraUpload",
      });
    },
    //头像
    upLoad(){
      this.$refs.getInp.click();
    },

    getFile(){

      console.log('获取图片的函数');
      let that = this; 
      console.log(this.$refs.getInp.files[0]);
      let f = this.$refs.getInp.files[0];
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function (){
        // console.log(fr.result);
        that.form.stu_head_img = fr.result;
      }
    },

    //籍贯
    handleChange(value) {
      console.log(value);
      this.form.stu_jg = value.join("-");
      console.log(this.form.stu_jg);
      // let arr1 = [1,2];
      // let arr2 = [3,4];
      // console.log(arr1.concat(arr2));
    },
     async onSubmit() {
      console.log("这是提交");

      this.form.stu_hobby = this.editor.getText();
      console.dir(this.form);
      let result = await req_stu_info(this.form);
      console.log(result);

      this.$message({
        message:'数据提交成功!!',
        type:"success",
        offset:50,
      })

      
    },
    goReset() {
      console.log("这是重置");
      this.$refs.form.resetFields();
      this.$refs.getInp.value = null;
      this.$nextTick(()=>{
        this.value = [];
        this.html = '<p></p>';
      })
    },
    //爱好
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
};
</script>

<style lang="scss" scoped>
.stu_info_wrap {
  display: flex;
  justify-content: center;
  align-items: center;

  .stu_info {
    width: 800px;
    // display: flex;
    .stu_info_title {
      text-align: center;
      margin:  20px 0;
      
    }
  }
}

// .el-form-item:last-child{
//   margin-top: 100px;
// }
</style>